<template>
  <div class="position">
    <!-- <div class="topBtn">
      <div
        v-for="(item,index) in btnList"
        :key="index"
        :class="num==index ? 'active':''"
        @click="btn(index)"
      >{{item.text}}</div>
    </div>
    <div class="map">
      <div v-for="(item,index) in imgList" :key="index" :class="num==index ? 'active':''">
        <img :src="item.imgUrl" alt />
      </div>
    </div>-->
    <tab
      :current="current"
      :values="items"
      @clickItem="onClickItem"
      style-type="text"
      active-color="#fff"
    ></tab>
    <view class="item">
      <view v-show="current === 0">
        <div class="w1">
          <img @tap="getZuoBiao" src="@/static/image/W1.jpg" alt />
          <img :key="index" 
          v-for="(item,index) in posArray"  
          :style="'top:' + item.x + 'rpx;left:' + item.y + 'rpx;'"
          v-show="flag" class="one" src="../../static/image/icon-one.png" alt="">
        </div>
      </view>
      <view v-show="current === 1">
        <div>
          <img src="@/static/image/W2.jpg" alt />
        </div>
      </view>
      <view v-show="current === 2">
        <div>
          <img src="@/static/image/W3.jpg" alt />
        </div>
      </view>
      <view v-show="current === 3">
        <div>
          <img src="@/static/image/W4.jpg" alt />
        </div>
      </view>
      <view v-show="current === 4">
        <div>
          <img src="@/static/image/E1.jpg" alt />
        </div>
      </view>
      <view v-show="current === 5">
        <div>
          <img src="@/static/image/E2.jpg" alt />
        </div>
      </view>
      <view v-show="current === 6">
        <div>
          <img src="@/static/image/E3.jpg" alt />
        </div>
      </view>
      <view v-show="current === 7">
        <div>
          <img src="@/static/image/E4.jpg" alt />
        </div>
      </view>
    </view>
    <div class="icons">
      <i @click="love" class="iconfont one">&#xe82a;</i>
      <i class="iconfont one">&#xe628;</i>
      <i class="iconfont one">&#xe6c5;</i>
      <i class="iconfont one" style="font-weight:bold;">&#xe60b;</i>
    </div>
  </div>
</template>
<script>
import tab from "@/components/tab";
export default {
  name: "",
  components: {
    tab,
  },
  data() {
    return {
      flag:false,
      tranLeft: 0, // 向左偏移
      tranTop: 0, // 向右偏移
      current: 0,
      items: ["W1", "W2", "W3", "W4", "E1", "E2", "E3", "E4"],
      posArray:[
        {
          x:'20',
          y:'300'
        },
        {
          x:'202',
          y:'10'
        },
        {
          x:'120',
          y:'100'
        }
      ]
    };
  },
  created() {},
  methods: {
    onClickItem(index) {
      if (this.current !== index.currentIndex) {
        this.current = index.currentIndex;
      }
    },
    getZuoBiao(e) {
      console.log(e.detail.x);
      console.log(e.detail.y); 
    },
    love(e) {
        this.flag = true
    },
  },
};
</script>
<style lang='less' scoped>
.position {
  .topBtn {
    margin-top: 30rpx;
    margin-bottom: 30rpx;
    width: 750rpx;
    overflow-x: scroll;
    white-space: nowrap;
    overflow-y: hidden;
    div {
      display: inline-block;
      width: 100rpx;
      height: 40rpx;
      background: rgba(0, 76, 179, 1);
      border-radius: 20rpx;
      margin-left: 30rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 40rpx;
      text-align: center;
    }
    .active {
      background-color: pink;
    }
  }
  /deep/ .segmented-control__text.data-v-4ca2a42a {
    display: inline-block;
    width: 100rpx;
    height: 40rpx;
    background: rgba(0, 76, 179, 1);
    border-radius: 20rpx;
    margin-left: 30rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 40rpx;
    text-align: center;
  }
  /deep/ .segmented-control.data-v-4ca2a42a {
    margin-top: 30rpx;
    margin-bottom: 30rpx;
    width: 750rpx;
    overflow-x: scroll;
    white-space: nowrap;
    overflow-y: hidden;
  }
  /deep/ .activeClass.data-v-4ca2a42a {
    color: #fff !important;
    background-color: #e29000;
    border: none;
  }
  .icons {
    display: flex;
    i {
      flex: 1;
      text-align: center;
      line-height: 80rpx;
      font-size: 50rpx;
      color: #666666;
    }
  }

  .w1{
      position: relative;
      .one{
          width: 22rpx;
          height: 20rpx;
          position: absolute;
          top:240rpx;
          left: 220rpx;
      }
  }
}
</style>